import { SEX, WORK } from './const'
import DefaultTitle from './DefaultTitle'
import styles from './index.modules.less'
import { Image } from 'antd-mobile'
import dayjs from 'dayjs'
import classNames from 'classnames'
import { useEffect, useRef, useState } from 'react'
import { Document, pdfjs, Page } from 'react-pdf'
console.log(pdfjs.version)
import 'react-pdf/dist/esm/Page/AnnotationLayer.css'
import 'react-pdf/dist/esm/Page/TextLayer.css'

pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`

/**  默认模板  */
const Index = ({ dataSource }: any) => {
    const { userBarrier } = dataSource
    const { detail } = userBarrier
    const { name = '-', workExperience = '-', age = '-', gender = '-', mobile = '-', email = '-', provinceName = '-', cityName = '-', avatar = '-' } = detail?.candidate || {}

    const { certificateList = [], description = '-', hobbyList = [], languageSkill = '-' } = detail?.hobbyCertificate || {}

    const { educationList = [], workExperienceList = [], projectExperienceList = [], practiceExperienceList = [], schoolExperienceList = [] } = detail || {}

    return (
        <div className={styles.default_template_page}>
            {/* 个人信息 */}
            <div className={styles.basic_information}>
                <div className={styles.basic_main}>
                    <div className={styles.name}>{name || '张三'}</div>
                    <div className={styles.experience}>{`${workExperience}  |  ${age}岁  |  ${SEX[gender]} `}</div>
                    <div className={styles.mobile}>{`联系电话: ${mobile}  |  联系邮箱: ${email}  |  期望城市: ${provinceName}-${cityName}`}</div>
                </div>
                <div className={styles.avatar}>
                    <Image src={avatar || 'https://source.busionline.com/avatar/user@3x.png'} className={styles.avatar_img} />
                </div>
            </div>
            {/* 个人能力  语言能力*/}
            <div className={styles.personal_abilities}>
                <DefaultTitle title="语言能力" />
                <div className={styles.personal_abilities_main}>
                    <div className={styles.self_evaluation}>{languageSkill || ''}</div>
                </div>
            </div>
            {/* 自我评价 */}
            <div className={styles.personal_abilities}>
                <DefaultTitle title="自我评价" />
                <div className={styles.personal_abilities_main}>
                    <div className={styles.self_evaluation}>{description || ''}</div>
                </div>
            </div>
            {/* 兴趣爱好 */}
            <div className={styles.interests_and_hobbies}>
                <DefaultTitle title="兴趣爱好" />
                <ul className={styles.hobby}>
                    {hobbyList?.map((i: string, index: number) => {
                        return <li key={index}>{i}</li>
                    })}
                </ul>
            </div>
            {/* 荣誉证书 */}
            <div className={styles.honorary_certificate}>
                <DefaultTitle title="荣誉证书" />
                <ul className={styles.hobby}>
                    {certificateList?.map((i: string, index: number) => {
                        return <li key={index}>{i}</li>
                    })}
                </ul>
            </div>
            {/* 教育经历 */}
            {educationList?.length > 0 && (
                <div className={styles.education_experience}>
                    <DefaultTitle title="教育经历" />
                    <div className={styles.education_experience_main}>
                        {educationList?.map((i: any) => {
                            return (
                                <div className={styles.education_experience_item} key={i.code}>
                                    <div className={styles.education_top}>
                                        <div className={styles.education_experience_item_left}>
                                            <span className={styles.school_name}>{i.name}</span>
                                            <span className={styles.professional_name}>{i.profession}</span>
                                        </div>
                                        <div className={styles.education_experience_item_right}>
                                            {dayjs(i.startTime).format('YYYY-MM')}
                                            {` - `}
                                            {dayjs(i.endTime).format('YYYY-MM')}
                                        </div>
                                    </div>
                                    <div className={styles.education_bottom}>
                                        {i.professionDesc && (
                                            <div className={styles.professional_description}>
                                                <i>专业成绩描述：</i>
                                                <span>{i.professionDesc}</span>
                                            </div>
                                        )}

                                        {i.courseDesc && (
                                            <div className={styles.professional_description}>
                                                <i>主修课程描述：</i>
                                                <span>{i.courseDesc}</span>
                                            </div>
                                        )}
                                    </div>
                                </div>
                            )
                        })}
                    </div>
                </div>
            )}

            {/* 工作经历 */}
            {workExperienceList?.length > 0 && (
                <div className={styles.work_experience}>
                    <DefaultTitle title="工作经历" />
                    <div className={styles.work_experience_main}>
                        {workExperienceList?.map((i: any) => {
                            return (
                                <div className={styles.work_experience_item} key={i.code}>
                                    <div className={styles.work_experience_item_title}>
                                        <div className={styles.work_experience_item_title_left}>
                                            <span className={styles.school_name}> {i.name}</span>
                                            <span className={classNames(styles.job)}>{i.job}</span>
                                        </div>
                                        <div className={styles.work_experience_item_title_right}>
                                            {dayjs(i.startTime).format('YYYY-MM')}
                                            {` - `}
                                            {dayjs(i.endTime).format('YYYY-MM')}
                                        </div>
                                    </div>
                                    {i.description && (
                                        <div className={styles.work_experience_content}>
                                            <i>职责描述：</i> <span>{i.description}</span>
                                        </div>
                                    )}
                                </div>
                            )
                        })}
                    </div>
                </div>
            )}

            {/* 项目经验  */}
            {projectExperienceList?.length > 0 && (
                <div className={styles.education_experience}>
                    <DefaultTitle title="项目经验" />
                    <div className={styles.education_experience_main}>
                        {projectExperienceList?.map((i: any) => {
                            return (
                                <div className={styles.education_experience_item} key={i.code}>
                                    <div className={styles.education_top}>
                                        <div className={styles.education_experience_item_left}>
                                            <span className={styles.school_name}>{i.name}</span>
                                            <span className={styles.professional_name}>{i.job}</span>
                                        </div>
                                        <div className={styles.education_experience_item_right}>
                                            {dayjs(i.startTime).format('YYYY-MM')}
                                            {` - `}
                                            {dayjs(i.endTime).format('YYYY-MM')}
                                        </div>
                                    </div>
                                    <div className={styles.education_bottom}>
                                        {i.description && (
                                            <div className={styles.professional_description}>
                                                <i>项目描述：</i> <span>{i.description}</span>
                                            </div>
                                        )}
                                    </div>
                                </div>
                            )
                        })}
                    </div>
                </div>
            )}

            {/* 实习经历 */}
            {practiceExperienceList?.length > 0 && (
                <div className={styles.education_experience}>
                    <DefaultTitle title="实习经历" />
                    <div className={styles.education_experience_main}>
                        {practiceExperienceList?.map((i: any) => {
                            return (
                                <div className={styles.education_experience_item} key={i.code}>
                                    <div className={styles.education_top}>
                                        <div className={styles.education_experience_item_left}>
                                            <span className={styles.school_name}>{i.name}</span>
                                            <span className={styles.professional_name}>{i.job}</span>
                                        </div>
                                        <div className={styles.education_experience_item_right}>
                                            {dayjs(i.startTime).format('YYYY-MM')}
                                            {` - `}
                                            {dayjs(i.endTime).format('YYYY-MM')}
                                        </div>
                                    </div>
                                    <div className={styles.education_bottom}>
                                        {i.description && (
                                            <div className={styles.professional_description}>
                                                <i>实习内容：</i>
                                                <span>{i.description}</span>
                                            </div>
                                        )}
                                    </div>
                                </div>
                            )
                        })}
                    </div>
                </div>
            )}

            {/* 校园经历 */}
            {schoolExperienceList?.length > 0 && (
                <div className={styles.education_experience}>
                    <DefaultTitle title="校园经历" />
                    <div className={styles.education_experience_main}>
                        {schoolExperienceList?.map((i: any) => {
                            return (
                                <div className={styles.education_experience_item} key={i.code}>
                                    <div className={styles.education_top}>
                                        <div className={styles.education_experience_item_left}>
                                            <span className={styles.school_name}>{i.name}</span>
                                            <span className={styles.professional_name}>{i.job}</span>
                                        </div>
                                        <div className={styles.education_experience_item_right}>
                                            {dayjs(i.startTime).format('YYYY-MM')}
                                            {` - `}
                                            {dayjs(i.endTime).format('YYYY-MM')}
                                        </div>
                                    </div>
                                </div>
                            )
                        })}
                    </div>
                </div>
            )}
        </div>
    )
}
Index.title = '默认模板'
// export default Index

// export default () => {
//     return  <iframe width="100%" frameBorder="0" src="https://zpimg.cn/enxoffice/20230809/9530964d302be1e42f.pdf#view=FitH" />
// }

export default ({ dataSource, onLoadSuccess }: any) => {
    const { userBarrier } = dataSource
    const { detail } = userBarrier
    const [pageNum, setPageNum] = useState<number>()

    return detail
        .filter((v: any) => v.fileUrl)
        .map((item: any, idx: number) => {
            return (
                <div key={`${item.fileUrl}_${idx}`}>
                    <Document
                        onLoadSuccess={({ numPages }) => {
                            setPageNum(numPages)
                            setTimeout(() => {
                                onLoadSuccess()
                            }, 100)
                        }}
                        onLoadError={() => console.log('onLoadError')}
                        file={item.fileUrl}
                    >
                        {Array.from(new Array(pageNum), (el, index) => (
                            <Page key={`page_${index + 1}`} pageNumber={index + 1} width={document.body.clientWidth} />
                        ))}
                    </Document>
                </div>
            )
        })
}
